<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:c="http://java.sun.com/jsp/jstl/core"
      xmlns:f="http://java.sun.com/jsf/core">
    <h:head>
        <title>Facelet Title</title>
    </h:head>
    <h:body>
        <ui:composition template="MasterPage.xhtml">
            <ui:define name="deSlide">
            </ui:define>
            <ui:define name="contents">
                <h:inputHidden value="#{detailAlbumManager.addAlbumID(param['id'])}"></h:inputHidden>
                <h:form id="formDA">
                    <script type="text/javascript" src="Script/jwplayer.js"></script>
                    <div class="DetailsAlbumBackgroundAudio"></div>
                    <div class="DetailsAlbumAudio">
                        <h4 class="titleAudioVideo"></h4>
                        <img id="closePlayer" style="float: right; margin-left: 490px; margin-top: -35px; position: fixed;" src="Images/close.png" alt=""></img>
                        <div id='defaultmediaplayer'></div>
                        <div id="listItem" class="listItemPlayer">
                            <h4 class="DetailsAlbumPlayerH4">List products</h4>
                            <div style="max-height: 150px; overflow-x: hidden; overflow-y: scroll;">
                                <ui:repeat value="#{detailAlbumManager.showDataStore()}" var="dataStore">
                                    <a onclick="playAudioAndVideo('#{dataStore.dataName}','#{dataStore.dataPath}','#{dataStore.dataImage}', true)" class="aItemInList" href="">${dataStore.dataName}</a>
                                </ui:repeat>
                            </div>
                        </div>
                    </div>
                    <div class="DetailsAlbumAddList">
                        <h4 class="DetailsAlbumAddListH4">Add to my list</h4>
                        <img id="closeAddToList" style="float: right;margin-left: 378px;margin-top: -35px;position: fixed;" src="Images/close.png" alt=""></img>
                        <div class="DetailsAlbumAddListContent">
                            <h:outputLabel style="float: left;padding: 10px 0 0 10px;width: 90px;" value="Add to playlist:"></h:outputLabel>
                            <div class="DetailsAlbumAddListContentList">
                                <h:selectManyCheckbox value="#{detailAlbumManager.collectionPlaylist}">
                                    <f:selectItems value="#{detailAlbumManager.listItem}"></f:selectItems>
                                </h:selectManyCheckbox>
                            </div>
                            <h:commandLink class="DetailsAlbumAddListContentSave" value="Add to my list" action="#{detailAlbumManager.listAlbumContentSave()}"></h:commandLink>
                            <h:inputHidden id="btnAddList" value="#{detailAlbumManager.titleAddtoList}"></h:inputHidden>
                            <hr style="width: 400px; float: left;" />
                            <div style="padding: 10px; float: left;">
                                <h:outputLabel value="New playlist:" style="float: left;padding-right: 26px;padding-top: 2px;"></h:outputLabel>
                                <h:inputText style="float: left;" value="#{detailAlbumManager.playListNew}"></h:inputText>
                                <h:commandLink class="DetailsAlbumAddListContentAdd" value="Add playlist new" action="#{detailAlbumManager.addNewDataStore()}"></h:commandLink>
                            </div>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(window).ready(function(){
                            resizeAudioPlayer();
                            resizeAddToList();
                        });
                        $(window).resize(function(){
                            resizeAudioPlayer();
                            resizeAddToList();
                        });
                        function resizeAudioPlayer(){
                            $(".DetailsAlbumAudio").css('top', ($(".DetailsAlbumBackgroundAudio").height()-$(".DetailsAlbumAudio").height())/2)
                            $(".DetailsAlbumAudio").css('left', ($(".DetailsAlbumBackgroundAudio").width()-$(".DetailsAlbumAudio").width())/2)
                        }
                        
                        function playAudioAndVideo(sName, sFile, sImage, bdisable){
                            $(".titleAudioVideo").text("Title: " + sName);
                            if(bdisable){
                                $("#listItem").css('display', 'block');
                            }else{
                                $("#listItem").css('display', 'none');
                            }
                            var smp3 = sFile.lastIndexOf('.mp3');
                            var swma = sFile.lastIndexOf('.wma');
                            if (smp3 >= 0)
                            {
                                jwplayer('defaultmediaplayer').setup({
                                    'style': 'DetailsAlbumAudio',
                                    'flashplayer': 'Script/player.swf',
                                    'id': 'playerID',
                                    'autoplay': 'true',
                                    'width': '500',
                                    'height': '60',
                                    'file': sFile,
                                    'repeat': 'always'
                                });
                            }else{
                                if(swma >= 0){
                                    jwplayer('defaultmediaplayer').setup({
                                        'style': 'DetailsAlbumAudio',
                                        'flashplayer': 'Script/player.swf',
                                        'id': 'playerID',
                                        'autoplay': 'true',
                                        'width': '500',
                                        'height': '60',
                                        'file': sFile,
                                        'repeat': 'always'
                                    });
                                }else{
                                    jwplayer('defaultmediaplayer').setup({
                                        'style': 'DetailsAlbumAudio',
                                        'flashplayer': 'Script/player.swf',
                                        'id': 'playerID',
                                        'autoplay': 'true',
                                        'image': sImage,
                                        'width': '500',
                                        'height': '400',
                                        'file': sFile,
                                        'repeat': 'always'
                                    });
                                }
                            }
                            $('.DetailsAlbumBackgroundAudio').fadeIn(500);
                            $('.DetailsAlbumAudio').fadeIn(500);
                            resizeAudioPlayer();
                        }
                        
                        $('#closePlayer').click(function(){
                            playAudioAndVideo('', '', 'sImage', false);
                            $("#listItem").css('display', 'none');
                            $('.DetailsAlbumBackgroundAudio').fadeOut(500);
                            $('.DetailsAlbumAudio').fadeOut(200);
                        });
                        
                        $('#closeAddToList').click(function(){
                            $('.DetailsAlbumAddList').fadeOut(500);
                            $('.DetailsAlbumBackgroundAudio').fadeOut(200);
                        });
                        
                        function checkLogin(){
                            if("#{session.getAttribute("UserId")}" == null || "#{session.getAttribute("UserId")}" == ""){
                                window.location = "Login.xhtml";    
                            }
                        }
                        
                        function addAlbumToMyList(albumId){
                            
                        }
                        
                        function addDataStoreToList(dataStoreId){
                            
                        }
                        
                        function clickAlbumAddtoMyList(){
                            checkLogin();
                            $("#formDA\\:btnAddList").val("Album");
                            $(".DetailsAlbumAddList").fadeIn(500);
                            $(".DetailsAlbumBackgroundAudio").fadeIn(500);
                        }
                        function clickDataStoreAddtoMyList(value){
                            $("#formDA\\:btnAddList").val(value);
                            $(".DetailsAlbumAddList").fadeIn(500);
                            $(".DetailsAlbumBackgroundAudio").fadeIn(500);
                        }
                        
                        function resizeAddToList(){
                            $(".DetailsAlbumAddList").css('top', ($(".DetailsAlbumBackgroundAudio").height()-$(".DetailsAlbumAddList").height())/2)
                            $(".DetailsAlbumAddList").css('left', ($(".DetailsAlbumBackgroundAudio").width()-$(".DetailsAlbumAddList").width())/2)
                        }
                        
                    </script>
                    <c:if test="#{cartManager.displayMessage}">
                        <div class="DetailsAlbumMessage">
                            <c:if test="#{cartManager.typeMessage}">
                                <h5 class="DetailsAlbumMessageOutputLabel" style="color: #ff6766;">#{cartManager.message}</h5>
                            </c:if>
                            <c:if test="#{!cartManager.typeMessage}">
                                <h5 class="DetailsAlbumMessageOutputLabel" style="color: #ff6766;">#{cartManager.message}</h5>
                            </c:if>
                            #{cartManager.messageEmpty()}
                        </div>
                    </c:if>
                    <c:if test="#{detailAlbumManager.displayMessage}">
                        <div class="DetailsAlbumMessage">
                            <c:if test="#{detailAlbumManager.typeMessage}">
                                <h5 class="DetailsAlbumMessageOutputLabel" style="color: white;">#{detailAlbumManager.message}</h5>
                            </c:if>
                            <c:if test="#{!detailAlbumManager.typeMessage}">
                                <h5 class="DetailsAlbumMessageOutputLabel" style="color: red;">#{detailAlbumManager.message}</h5>
                            </c:if>
                            #{detailAlbumManager.resetMessage()}
                        </div>
                    </c:if>
                    <ui:repeat value="#{detailAlbumManager.showInforAlbum()}" var="album">
                        <div class="DefaultAllbox">
                            <div class="DetailsAlbumImage">
                                <img src="#{album.albumImage}" alt="" title="#{album.albumName}" 
                                     width="170px" height="170px"></img>
                            </div>
                            <div class="DetailsAlbumInfor">
                                <h3 class="DetailsAlbumH2">#{album.albumName}</h3>
                                <p style="color: #818181;">Category Name: <h:outputLabel style="color: #000;" value="#{album.cateName}"></h:outputLabel></p>
                                <p style="color: #818181;">Create Date: <h:outputLabel style="color: #000;" value="#{album.albumDateCreate}"></h:outputLabel></p>
                                <p style="color: #818181;">Supplier: <h:outputLabel style="color: #000;" ></h:outputLabel></p>
                                <p style="color: #818181;">Price:<h:outputLabel style="color: #ff6766; font-weight: 600" value="$ #{album.albumPrice}"></h:outputLabel></p>
                                <p style="color: #818181;">Quantity: <h:outputLabel style="color: #000;" value="#{album.quantity}"></h:outputLabel></p>
                                #{cartManager.valuePageOld("DetailsAlbum.xhtml?id=", param['id'])}
                                <div style="float: left">
                                    <p class=""><a class="abtn" href="addToCartPage.xhtml?DataStoreId=#{album.albumID}">Add to Cart</a>
                                       <a class="abtn" onclick="playAudioAndVideo('#{detailAlbumManager.firstTitle}', 
                                           '#{detailAlbumManager.firstPath}', '#{detailAlbumManager.firstImage}', true)" href="">Play all</a>
                                                  <a onclick="clickAlbumAddtoMyList()" class="abtn" href="">Add to my list</a>
                                    </p>
                                </div>
                            </div>
                            <div class="DetailsAlbumDetail">
                                <span style="color: #666; font-style: italic">Description:</span><br/>
                                <h:outputText value="#{album.albumDetails}" escape="false" />
                                <h2 class="DetailsAlbumItmeDataStoreH2">Item in the album</h2>
                                <ui:repeat value="#{detailAlbumManager.showDataStore()}" var="listDataStore">
                                    <div class="DetailsAlbumItemDataStore">
                                        <div class="DetailsAlbumItemDataStoreImg">
                                            <div style="width: 400px; float: left" class="contentalbumeach"> 
                                                <span class="numbercountS">#{detailAlbumManager.countnumbers}</span>
                                                <span class="textinside">#{listDataStore.dataName}</span>
                                            </div>
                                            <div style="float: left" class="naviAlbumListen">
                                                #{mdata_Index.randomSongLength()}
                                                   <a class="listen" onclick="playAudioAndVideo('#{listDataStore.dataName}', 
                                                        '#{listDataStore.dataPath}','DVDStore/album/albumDefault.png', false)" 
                                                   href="">Listen </a>
                                                <span class="add"><a class="listen" href="" onclick="clickDataStoreAddtoMyList(#{listDataStore.dataID})">Add To Playlist</a></span>
                                            </div>
                                        </div>
                                    </div>
                                </ui:repeat>
                            </div>
                        </div>
                    </ui:repeat>
                </h:form>
            </ui:define>
        </ui:composition>
    </h:body>
</html>

